<template>
  <div class="clstitle">
    <van-grid
      :border="false"
      v-for="(clsfen, index) in clsfens"
      :column-num="4"
      :gutter="5"
      :key="index"
    >
      <van-grid-item>
        <van-image :src="clsfen.picIPadUrl" />
        <p>{{ clsfen.name }}</p>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import { clsfen } from "../../../api/boke/clstitle";
export default {
  data() {
    return {
      clsfens: [],
    };
  },
  async created() {
    const res = await clsfen({
      cookie: localStorage.cookie,
    });
    console.log(1212, res);
    this.clsfens = res.data.categories;
    console.log(222, this.clsfens);
    this.picIPadUrl = res.data.categories.picIPadUrl;
    this.name = res.data.categories.name;
  },
};
</script>
<style scoped>
.clstitle {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.van-image {
  width: 0.8rem;
  height: 0.8rem;
}
.clstitle .van-grid {
  width: 23%;
}
.clstitle .van-grid-item p {
  width: 1.3rem;
  white-space: nowrap;
  overflow: hidden;
  font-size: 0.25rem;
  color: rgba(0, 0, 0, 0.534);
  line-height: 0.25rem;
  text-align: center;
}
</style>
